<template>
  <div :class="!isDialog ? 'input-wrap' : 'input-wrap-dialog'">
    <n-input
      :ref="focusRef"
      v-model:value="inputValue"
      :class="{ 'active-input': !isDisabled }"
      :style="{ width: props.width }"
      class="password-input"
      :maxlength="inputLength"
      autocomplete="off"
      auto-complete="new-password"
      :readonly="readonly"
      :disabled="isDisabled"
      :autofocus="autofocus"
      type="text"
      @keyup.enter="blurInputFn"
      @focus="handleIptClick"
      @blur="handleBlur"
      @input="handleInput"
    />
  </div>
</template>
<script lang="ts" setup name="DFScanInput">
  import { nextTick, ref } from 'vue';

  type Props = {
    focusRef?: string;
    inputLength?: number;
    width?: string;
    isDisabled?: boolean;
    isDialog?: boolean;
    autofocus?: boolean;
  };

  const props = withDefaults(defineProps<Props>(), {
    focusRef: () => '',
    inputLength: () => 50,
    width: () => '120px',
    isDisabled: () => false,
    isDialog: () => false,
    autofocus: () => false,
  });

  const emit = defineEmits(['handle', 'handleInput', 'inputValueChange']);

  const readonly = ref<boolean>(true);

  const canRequire = ref<boolean>(false);

  const inputValue = ref<string>('');

  const focusRefFn = () => {
    nextTick(() => {
      // props.focusRef && props.focusRef.focus();
    });
  };
  const handleIptClick = () => {
    readonly.value = false;
  };
  // 扫码回车
  const blurInputFn = () => {
    if (canRequire.value) return;
    if (!canRequire.value) canRequire.value = true;

    emit('handle', inputValue.value);
  };
  // 扫码失焦
  const handleBlur = () => {
    if (canRequire.value) return;
    if (!canRequire.value) canRequire.value = true;

    emit('handle', inputValue.value);
  };
  const handleInput = () => {
    emit('handleInput', inputValue.value);
  };
  // 清空输入框
  const scanInputClear = () => {
    inputValue.value = '';
  };

  watch(inputValue, (val, oldVal) => {
    canRequire.value = val === oldVal;
    inputValue.value = val.trim();
    emit('inputValueChange', val.trim(), oldVal.trim());
  });

  defineExpose({ focusRefFn, scanInputClear });
</script>
<style lang="less" scoped>
  .input-wrap {
    :deep(.el-input__inner) {
      width: 320px !important;
    }
  }
  .show-input {
    width: 160px;
    padding-left: 5px;
    /*1. 先强制一行内显示文本*/
    white-space: nowrap;
    /*2. 超出的部分隐藏*/
    overflow: hidden;
    /*3. 文字用省略号替代超出的部分*/
    text-overflow: ellipsis;
  }
  .input-wrap-dialog {
    :deep(.el-input__inner) {
      width: 100% !important;
    }
    :deep(.el-input-group) {
      width: 100% !important;
    }
    /*   .show-input{
    max-width:50% !important;
  }
  ::v-deep .el-input-group__append, .el-input-group__prepend{
    width:50%!important;
  } */
  }
  .active-input {
    :deep(.el-input__inner) {
      border: 1px solid #34cf91 !important;
    }
    :deep(.el-input__inner:focus,
    .el-textarea__inner:focus,
    .el-range-editor .is-active,
    .el-select .el-input .is-focus) {
      box-shadow: none !important;
    }
  }
</style>
